/**
 * 对于大型Web应用程序，将所有代码放入单个文件并不高效。Webpack允许您将大型JS文件拆分为多个块。
 * 特别是，如果在某些情况下仅需要某些代码块，则可以按需加载这些块。
 * 
 * require.ensure告诉Webpack ./a.js应该将其分离bundle.js并构建到单个块文件中。
 * 
 * 现在Webpack负责依赖，输出文件和运行时的东西。您不必在您的index.html和中添加任何冗余webpack.config.js。
 * 
 * 从表面上看，你不会感到任何不同。
 * 然而，实际的WebPack建立main.js和a.js成不同的块（bundle.js和0.bundle.js），并加载0.bundle.js从bundle.js当上的需求
 * 
 * */ 


document.open();
document.write('<h1 id="content">点击加载a.js</h1>');
document.write('<h2 id="contentb">点击加载b.js</h2>');

document.getElementById("content").onclick = function(){
  // 这里点击之后才会加载a.js
  require.ensure(['./a'], function(require) {
    var content = require('./a');

    console.log("a.js", content);
  
  });
}

document.getElementById("contentb").onclick = function(){
  // 这里点击之后才会加载a.js
  require.ensure(['./b'], function(require) {
    var content = require('./b');

    content();
    console.log("b.js", content);
  
  });
}
document.close();


console.log("window", window);
